<template>
	<view class="GroupCode dis">
		<image class="code-img pof" :src="`${OnlineStatic}codes.png`" mode="widthFix"></image>
		<view class="group por f-background radius20">
			<view class="group-title font-weight-600 size-32 dis">群二维码管理</view>
			<view class="group-deoc font-weight-400 size-24">在微信社群中下载群二维码 裁剪成正方形大小</view>
			<view class="group-wai dis text-align" @click="onAfterRead">
				<view class="group-img" v-if="!loading">
					<image class="width-height100" v-if="qrCodeUrl" :src="qrCodeUrl"
						mode=""></image>
					<image :src="`${OnlineStatic}shangc.png`" v-else :style="{width: '440rpx',height: '440rpx'}">
					</image>
				</view>
			</view>
			<view class="expired size-30" v-if="!loading">
				<text v-if="!infoData.qrCodeUrl && infoData.isExpire*1">请上传社群二维码</text>
				<text v-else-if="infoData.qrCodeUrl && !infoData.isExpire">二维码将在 {{infoData.qrCodeTime}} 过期</text>
				<text v-else>二维码已过期 请及时更换群码</text>
			</view>
			<u-button type="primary"
				:customStyle="{width: '296rpx',height: '86rpx',borderRadius: '100rpx',marginTop: '44rpx'}"
				color="#EB0000" @click="postUpdQrCode">
				<text class="color-f font-weight-600 size-32">确认更换</text>
			</u-button>
		</view>
	</view>
</template>

<script>
	import { OnlineStatic, TeamLeaderQrCodeById, UpdQrCode } from "@/api/index"
	import { singleUpload } from "@/utils/index"
	export default {
		components: {

		},
		data() {
			return {
				loading: true,
				OnlineStatic,
				infoData: {},
				qrCodeUrl: ''
			}
		},
		onLoad() {
			this.postTeamLeaderQrCodeById()
		},
		methods: {
			async postTeamLeaderQrCodeById(bool) {
				const { code, data } = await TeamLeaderQrCodeById({ qrCodeType: 2 })
				if (code == '200') {
					if (data.isExpire * 1) data.qrCodeUrl = ''
					this.infoData = data || {}
					this.qrCodeUrl = data.qrCodeUrl
					this.loading = false
					if (bool) uni.$u.toast('操作成功', 1000)
				}
			},
			async postUpdQrCode() {
				const params = {
					qrCodeId: this.infoData.id,
					qrCodeUrl: this.qrCodeUrl
				}
				const { code, data } = await UpdQrCode(params)
				if (code == '200') {
					this.postTeamLeaderQrCodeById(true)
					console.log('data', data)
				}
			},
			onAfterRead(e) {
				const _this = this
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						console.log('chooseImageRes', chooseImageRes)
						_this.singleUpload(chooseImageRes.tempFilePaths[0])
					}
				});
			},
			async singleUpload(res) {
				const item = await singleUpload(res, 6)
				console.log('item', item)
				this.qrCodeUrl = item.imgURL
			}
		}
	}
</script>

<style lang="scss">
	.GroupCode {
		width: 100%;
		height: 100vh;
		background: #EC0303;

		.code-img {
			width: 100%;
			bottom: 0;
			left: 0;
		}

		.group {
			width: 642rpx;
			margin-bottom: 10vh;
			padding-bottom: 40rpx;

			.group-title {
				background: #F9E2C5;
				height: 88rpx;
			}

			.group-deoc {
				color: #815A52;
				text-align: center;
				margin: 40rpx 0 16rpx;
			}

			.expired {
				color: #815A52;
				text-align: center;
			}

			.expired-img {
				width: 100rpx;
				height: 100rpx;
				opacity: .2;
				margin: 0 auto;
			}

			.group-img {
				width: 480rpx;
				height: 480rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background: #F6F6F6;
				margin: 0 auto 22rpx;

				.size-32 {
					margin: 20rpx 0;
				}
			}
		}
	}
</style>